<script setup>
  import useWebsiteStore from '../store/websiteStore';
  import {storeToRefs} from 'pinia'
  import { onMounted, ref } from 'vue';

  const websiteStore = useWebsiteStore()
  const { websites,name } = storeToRefs(websiteStore)

  onMounted(() => {
    websiteStore.init()
  })

  const curIndex = ref(0)

  const handleItemClick = (index) => {
    curIndex.value = index
  }

</script>

<template>
  <div class="">
    <p id="no-item" v-if="websites.length < 1">暂无数据{{ name }}</p>
    <div id="items" v-else>
      <div class="read-item" 
      :class="{selected: curIndex ==i}" 
      v-for="(ws,index) in websites" :key="index"
      @click="handleItemClick(index)"
      >
        <img :src="ws.screenshot" :alt="ws.title">
        <h2>{{ ws.title }}</h2>
        <button @click="websiteStore.deleteItem(ws.url)">X</button>
      </div>
      <!-- <div class="read-item">
        <img src="">
        <h2>提供24小时服务</h2>
        <button>X</button>
      </div> -->

    </div>
  </div>
</template>

<style lang="less" scoped>
  #no-item {
    font-weight: bold;
    color: silver;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 100px;
    z-index: -1;
  }
  #items {
    .read-item {
      display: flex;
      align-items: center;
      align-content: center;
      border-bottom: lightgray 2px solid;
      background-color: #fafafa;
      border-left: 10px solid lightgray;
      -webkit-user-select: none;
      position: relative;
      padding: 10px;
      img {
        width: 20%;
        margin-right: 25px;
        border: solid 1px #ccc;
      }
      &:hover {
        background: #eee;
      }
      &:hover button{
        display: inline-block;
      }
      &.selected {
        border-left-color: dodgerblue;
      }
      button {
        position: absolute;
        display: none;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        background-color: #f44336;
        border: none;
        border-radius: 50%;
        color: white;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
</style>
